<template>
	<view class="container">
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		<uni-section :title="customerId=== '' ? '添加客户' : '编辑客户'" type="line">
			<view class="example">
				<!-- 自定义表单校验 -->
				<uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="customFormData"
					:label-position="alignment">
					<uni-forms-item label="客户姓名" required name="customerName">
						<uni-easyinput :disabled="isPTYH && customerId !==''" v-model="customFormData.customerName"
							placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="客户经理" name="customerManager">
						<uni-easyinput v-model="customFormData.customerManager" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="电话" required name="phone">
						<uni-easyinput :disabled="isPTYH && customerId !==''" v-model="customFormData.phone"
							placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="所属城市" name="city">
						<uni-easyinput v-model="customFormData.city" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="所属小组" name="team">
						<uni-easyinput v-model="customFormData.team" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="职业" name="zhiye">
						<uni-data-select v-model="customFormData.zhiye" :localdata="occupations">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="单位名称" name="unitName">
						<uni-easyinput v-model="customFormData.unitName" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="装修小区" name="xiaoqu">
						<uni-easyinput v-model="customFormData.xiaoqu" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="装修位置" name="xiaoquArea">
						<uni-easyinput v-model="customFormData.xiaoquArea" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="进件银行" name="inBank">
						<uni-data-select v-model="customFormData.inBank" :localdata="inBanks"
							@change="queryDeptListByParentId">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="进件银行网点" name="inBankArea" :labelWidth='140'>
						<uni-data-select v-model="customFormData.inBankArea" :localdata="inBankAreas"
							@change="queryInManagerByDeptId">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="进件经理" name="inManager">
						<uni-data-select v-model="customFormData.inManager" :localdata="inManagers">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="进件时间">
						<uni-datetime-picker type="date" return-type="string" v-model="customFormData.inTime" />
					</uni-forms-item>
					<uni-forms-item label="申请额度" name="sqMoney">
						<uni-easyinput type='digit' v-model="customFormData.sqMoney" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="申请编号" name="sqCode">
						<uni-easyinput v-model="customFormData.sqCode" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="是否审批通过" :labelWidth='140'>
						<uni-data-checkbox v-model="customFormData.sqFlag" :localdata="sqFlags" />
					</uni-forms-item>
					<uni-forms-item label="通过时间">
						<uni-datetime-picker type="date" return-type="string" v-model="customFormData.tgTime" />
					</uni-forms-item>
					<uni-forms-item label="授信金额" name="sxMoney">
						<uni-easyinput type='digit' v-model="customFormData.sxMoney" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="放款时间">
						<uni-datetime-picker type="date" return-type="string" v-model="customFormData.fkTime" />
					</uni-forms-item>
					<uni-forms-item label="失效时间">
						<uni-datetime-picker disabled="" type="date" return-type="string"
							v-model="customFormData.sxTime" />
					</uni-forms-item>
					<uni-forms-item label="放款金额" name="fkMoney">
						<uni-easyinput type='digit' v-model="customFormData.fkMoney" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="累计刷卡金额" name="ljSkMoney" :labelWidth='140'>
						<uni-easyinput type='digit' disabled v-model="customFormData.ljSkMoney" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="剩余待刷卡金额" name="lessSkMoney" :labelWidth='140'>
						<uni-easyinput type='digit' disabled="" v-model="customFormData.lessSkMoney"
							placeholder="请输入" />
					</uni-forms-item>
					<view v-for="num in 7" :key="num">
						<uni-forms-item :label="`刷卡时段${num+1}`">
							<picker mode="date" fields="month" :value="customFormData[`skTime${num+1}`]"
								:start="startDate" :end="endDate"
								@change=" (val) => {bindDateChange(val, `skTime${num+1}`)}">
								<view v-if="customFormData[`skTime${num+1}`]" class="uni-input">
									{{customFormData[`skTime${num+1}`]}}
								</view>
								<view v-else class="pleaseSelect">
									请选择
								</view>
							</picker>
							<!-- <uni-datetime-picker field="month" type="month" return-type="string"
								v-model="customFormData[`skTime${num+1}`]" /> -->
						</uni-forms-item>
						<uni-forms-item :label="`刷卡${num+1}金额`" :name="`skMoney${num+1}`">
							<uni-easyinput type='digit' v-model="customFormData[`skMoney${num+1}`]"
								placeholder="请输入" />
						</uni-forms-item>
					</view>
					<uni-forms-item label="备注" name="remark">
						<uni-easyinput type="textarea" v-model="customFormData.remark" placeholder="请输入" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('customForm')">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		queryValueByKey,
		queryValueByParentCode,
	} from '@/api/dict'
	import {
		add,
		edit,
		queryById,
		queryUseDeptInfo
	} from "@/api/customer";
	export default {
		data() {
			return {
				isPTYH: false, // 是否是普通用户
				customerId: '',
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				// 处理表单排列切换
				alignment: 'top',
				// 自定义表单数据
				customFormData: {
					txr: '',
					team: '',
					id: '',
					customerManager: '', // 客户经理
					phone: '',
					customerName: '',
					zhiye: '',
					unitName: '',
					xiaoqu: '',
					xiaoquArea: '',
					inBank: '',
					inBankArea: '',
					inManager: '',
					inTime: '',
					sqMoney: 0,
					sqCode: '',
					sqFlag: '',
					sxMoney: 0,
					fkTime: '',
					tgTime: '',
					sxTime: '',
					fkMoney: 0,
					ljSkMoney: 0,
					lessSkMoney: 0,
					skMoney1: 0,
					skMoney2: 0,
					skMoney3: 0,
					skMoney4: 0,
					skMoney5: 0,
					skMoney6: 0,
					skMoney7: 0,
					skTime1: '',
					skTime2: '',
					skTime3: '',
					skTime4: '',
					skTime5: '',
					skTime6: '',
					skTime7: '',
					remark: ''
				},
				occupations: [],
				inBanks: [],
				inBanksOld: [],
				inBankAreas: [],
				inBankAreasOld: [],
				inManagers: [],
				// 单选数据源
				sqFlags: [{
					text: '是',
					value: '1'
				}, {
					text: '否',
					value: '0'
				}],
				// 自定义表单校验规则
				customRules: {
					customerName: {
						rules: [{
								required: true,
								errorMessage: '客户姓名不能为空'
							},
							{
								maxLength: 10,
								errorMessage: '{label}长度不能超过 {maxLength} 个字符',
							}
						],
						label: '客户姓名',
						validateTrigger: 'blur'
					},
					customerManager: {
						rules: [{
							maxLength: 30,
							errorMessage: '{label}长度不能超过 {maxLength} 个字符',
						}],
						label: '客户经理',
						validateTrigger: 'blur'
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							maxLength: 11,
							errorMessage: '{label}长度不能超过 {maxLength} 个字符',
						}],
						label: '电话',
						validateTrigger: 'blur'
					},
					city: {
						rules: [{
							maxLength: 15,
							errorMessage: '{label}长度不能超过 {maxLength} 个字符',
						}],
						label: '所属城市',
						validateTrigger: 'blur'
					},
					team: {
						rules: [{
							maxLength: 15,
							errorMessage: '{label}长度不能超过 {maxLength} 个字符',
						}],
						label: '所属小组',
						validateTrigger: 'blur'
					},
					unitName: {
						rules: [{
							maxLength: 10,
							errorMessage: '{label}长度不能超过 {maxLength} 个字符',
						}],
						label: '单位名称',
						validateTrigger: 'blur'
					},
					xiaoqu: {
						rules: [{
							maxLength: 10,
							errorMessage: '{label}长度不能超过 {maxLength} 个字符',
						}],
						label: '装修小区',
						validateTrigger: 'blur'
					},
					xiaoquArea: {
						rules: [{
							maxLength: 10,
							errorMessage: '{label}长度不能超过 {maxLength} 个字符',
						}],
						label: '装修位置',
						validateTrigger: 'blur'
					},
					sqMoney: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '申请额度',
						validateTrigger: 'blur'
					},
					sqCode: {
						rules: [{
							maxLength: 20,
							errorMessage: '{label}长度不能超过 {maxLength} 个字符',
						}],
						label: '申请编号',
						validateTrigger: 'blur'
					},
					sxMoney: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '授信金额',
						validateTrigger: 'blur'
					},
					fkMoney: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '放款金额',
						validateTrigger: 'blur'
					},
					ljSkMoney: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '累计刷卡金额',
						validateTrigger: 'blur'
					},
					lessSkMoney: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '剩余待刷卡金额',
						validateTrigger: 'blur'
					},
					skMoney1: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡1金额',
						validateTrigger: 'blur'
					},
					skMoney2: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡2金额',
						validateTrigger: 'blur'
					},
					skMoney3: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡3金额',
						validateTrigger: 'blur'
					},
					skMoney4: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡4金额',
						validateTrigger: 'blur'
					},
					skMoney5: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡5金额',
						validateTrigger: 'blur'
					},
					skMoney6: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡6金额',
						validateTrigger: 'blur'
					},
					skMoney7: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡7金额',
						validateTrigger: 'blur'
					},
					skMoney8: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡8金额',
						validateTrigger: 'blur'
					},
					skMoney9: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡9金额',
						validateTrigger: 'blur'
					},
					skMoney10: {
						rules: [{
							format: 'number',
							errorMessage: '请填写数字',
						}, {
							maximum: 1000000000,
							minimum: 0,
							errorMessage: '{label}数字在 {minimum} 到 {maximum} 合理选取',
						}],
						label: '刷卡10金额',
						validateTrigger: 'blur'
					},
					remark: {
						rules: [{
								format: 'string'
							},
							{
								maxLength: 30,
								errorMessage: '备注长度在不能超过 {maxLength} 个字符',
							},
						],
						validateTrigger: 'bind'
					}
				}
			}
		},
		computed: {},
		onLoad(options) {
			const userInfo = this.$store.state.user
			if (userInfo.roles.length === 1) {
				if (userInfo.roles[0].roleName === '普通用户') {
					this.isPTYH = true
				}
			}
			if (options.customerId) {
				this.customerId = options.customerId
				this.queryById(options.customerId)
				uni.setNavigationBarTitle({
					title: '编辑客户'
				});
			} else {
				this.customFormData.txr = this.$store.state.user.name
				this.queryUseDeptInfo();
				uni.setNavigationBarTitle({
					title: '添加客户'
				});
			}
			this.queryValueByKey('ZHIYE', 'occupations');
			this.queryValueByKey('BANK', 'inBanks');
		},
		onBackPress(event) {
			uni.redirectTo({
				url: './index'
			});
			return true;
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		created() {},
		watch: {
			'customFormData.skMoney1'(val) {
				if (val) {
					val = parseFloat(val)
				} else {
					val = 0
				}
				this.customFormData.ljSkMoney = val + parseFloat(this.customFormData.skMoney2) + parseFloat(this
					.customFormData.skMoney3) + parseFloat(this.customFormData.skMoney4) + parseFloat(this
					.customFormData.skMoney5) + parseFloat(this.customFormData.skMoney6) + parseFloat(this
					.customFormData.skMoney7)
			},
			'customFormData.skMoney2'(val) {
				if (val) {
					val = parseFloat(val)
				} else {
					val = 0
				}
				this.customFormData.ljSkMoney = val + parseFloat(this.customFormData.skMoney1) + parseFloat(this
					.customFormData.skMoney3) + parseFloat(this.customFormData.skMoney4) + parseFloat(this
					.customFormData.skMoney5) + parseFloat(this.customFormData.skMoney6) + parseFloat(this
					.customFormData.skMoney7)
			},
			'customFormData.skMoney3'(val) {
				if (val) {
					val = parseFloat(val)
				} else {
					val = 0
				}
				this.customFormData.ljSkMoney = val + parseFloat(this.customFormData.skMoney2) + parseFloat(this
					.customFormData.skMoney1) + parseFloat(this.customFormData.skMoney4) + parseFloat(this
					.customFormData.skMoney5) + parseFloat(this.customFormData.skMoney6) + parseFloat(this
					.customFormData.skMoney7)
			},
			'customFormData.skMoney4'(val) {
				if (val) {
					val = parseFloat(val)
				} else {
					val = 0
				}
				this.customFormData.ljSkMoney = val + parseFloat(this.customFormData.skMoney2) + parseFloat(this
					.customFormData.skMoney3) + parseFloat(this.customFormData.skMoney1) + parseFloat(this
					.customFormData.skMoney5) + parseFloat(this.customFormData.skMoney6) + parseFloat(this
					.customFormData.skMoney7)
			},
			'customFormData.skMoney5'(val) {
				if (val) {
					val = parseFloat(val)
				} else {
					val = 0
				}
				this.customFormData.ljSkMoney = val + parseFloat(this.customFormData.skMoney2) + parseFloat(this
					.customFormData.skMoney3) + parseFloat(this.customFormData.skMoney4) + parseFloat(this
					.customFormData.skMoney1) + parseFloat(this.customFormData.skMoney6) + parseFloat(this
					.customFormData.skMoney7)
			},
			'customFormData.skMoney6'(val) {
				if (val) {
					val = parseFloat(val)
				} else {
					val = 0
				}
				this.customFormData.ljSkMoney = val + parseFloat(this.customFormData.skMoney2) + parseFloat(this
					.customFormData.skMoney3) + parseFloat(this.customFormData.skMoney4) + parseFloat(this
					.customFormData.skMoney5) + parseFloat(this.customFormData.skMoney1) + parseFloat(this
					.customFormData.skMoney7)
			},
			'customFormData.skMoney7'(val) {
				if (val) {
					val = parseFloat(val)
				} else {
					val = 0
				}
				this.customFormData.ljSkMoney = val + parseFloat(this.customFormData.skMoney2) + parseFloat(this
					.customFormData.skMoney3) + parseFloat(this.customFormData.skMoney4) + parseFloat(this
					.customFormData.skMoney5) + parseFloat(this.customFormData.skMoney6) + parseFloat(this
					.customFormData.skMoney1)
			},
			'customFormData.ljSkMoney'(val) {
				if (val) {
					val = parseFloat(val)
				} else {
					val = 0
				}
				if (val > this.customFormData.fkMoney) {
					this.msgType = 'warn'
					this.messageText = `刷卡金额之和不能超过放款金额  ${this.customFormData.fkMoney} (元)`
					this.$refs.message.open()
					return
				}
				this.customFormData.lessSkMoney = (parseFloat(this.customFormData.fkMoney) - val).toFixed(2)
			},
			'customFormData.fkMoney'(val) {
				this.customFormData.lessSkMoney = (val - parseFloat(this.customFormData.ljSkMoney)).toFixed(2)
			},
			'customFormData.fkTime'(val) {
				if (val) {
					this.customFormData.sxTime = this.addNumDateToDate(new Date(val), 180)
					for (let i = 0; i < 7; i++) {
						this.customFormData[`skTime${i + 1}`] = this.addNumMonthToDate(new Date(val), i, this)
					}
				}
			}
		},
		methods: {
			submit(ref) {
				if (this.customFormData.inTime) {
					if (!this.customFormData.inTime.includes('00:00:00')) {
						this.customFormData.inTime = this.customFormData.inTime + ' 00:00:00'
					}
				}
				if (this.customFormData.fkTime) {
					if (!this.customFormData.fkTime.includes('00:00:00')) {
						this.customFormData.fkTime = this.customFormData.fkTime + ' 00:00:00'
					}
				}
				if (this.customFormData.tgTime) {
					if (!this.customFormData.tgTime.includes('00:00:00')) {
						this.customFormData.tgTime = this.customFormData.tgTime + ' 00:00:00'
					}
				}
				if (this.customFormData.sxTime) {
					if (!this.customFormData.sxTime.includes('00:00:00')) {
						this.customFormData.sxTime = this.customFormData.sxTime + ' 00:00:00'
					}
				}
				this.$refs[ref].validate().then(res => {
					if (this.customFormData.id) {
						edit(this.customFormData).then(res => {
							this.$tab.redirectTo('/pages/customer/index')
						})
					} else {
						add(this.customFormData).then(res => {
							this.$tab.redirectTo('/pages/customer/index')
						})
					}

				}).catch(err => {
					console.log('err', err);
				})
			},
			async queryValueByKey(key, type) {
				const res = await queryValueByKey({
					key
				})
				this[type + 'Old'] = res.data
				const All = res.data
				let myrange = []
				All.forEach((val, index) => {
					myrange.push({
						value: val.dictValue, // 选项id
						text: val.dictLabel // 选项名称
					})
				})
				this[type] = myrange
				return res.data
			},
			queryDeptListByParentId(parentCode) {
				if (parentCode) {
					const obj = this.inBanksOld.find(item => item.dictValue === parentCode)
					parentCode = obj.dictCode
					this.customFormData.inBankArea = ''
					this.customFormData.inManager = ''
					this.queryValueByParentCode('inBankAreas', parentCode)
				}
			},
			queryInManagerByDeptId(parentCode) {
				if (parentCode) {
					const obj = this.inBankAreasOld.find(item => item.dictValue === parentCode)
					parentCode = obj.dictCode
					this.customFormData.inManager = ''
					this.queryValueByParentCode('inManagers', parentCode)
				}
			},
			async queryValueByParentCode(type, parentCode) {
				if (parentCode) {
					const res = await queryValueByParentCode({
						parentCode
					})
					this[type + 'Old'] = res.data
					const All = res.data
					let myrange = []
					All.forEach((val, index) => {
						myrange.push({
							value: val.dictValue, // 选项id
							text: val.dictLabel // 选项名称
						})
					})
					this[type] = myrange
					return res.data
				}
				return []
			},
			async queryById(id) {
				const res = await queryById({
					id
				})
				this.customFormData = res.data
				const inBankList = await this.queryValueByKey('BANK', 'inBanks')
				const obj = inBankList.find(item => item.dictValue === res.data.inBank)
				if (obj) {
					const inBankAreaList = await this.queryValueByParentCode('inBankAreas', obj.dictCode)
					const obj2 = inBankAreaList.find(item => item.dictValue === res.data.inBankArea)
					if (obj2) {
						this.queryValueByParentCode('inManagers', obj2.dictCode)
					}
				}
			},
			async queryUseDeptInfo() {
				const res = await queryUseDeptInfo({})
				this.customFormData.city = res.data.parentDeptName
				this.customFormData.team = res.data.deptName
				this.customFormData.customerManager = res.data.nickName
			},
			bindDateChange(item, key) {
				this.customFormData[key] = item.detail.value
			},
			/**
			 * 设置指定日期加num个月
			 * @param date
			 * @param num
			 * @param that
			 * @returns {Date}
			 */
			addNumMonthToDate(date, num, that) {
				// 创建一个新的 Date 对象，设置其日期为原始日期的下一个月的同一天
				const newDate = new Date(date.getFullYear(), date.getMonth() + num, date.getDate())
				// 如果新的月份没有那么多天（比如2月通常只有28或29天），则调整日期到下个月的第一天
				if (newDate.getDate() !== date.getDate()) {
					newDate.setDate(0)
				}
				return that.formatDate(newDate)
			},
			/**
			 * 设置指定日期加num个天
			 * @param date
			 * @param num
			 * @param that
			 * @returns {Date}
			 */
			addNumDateToDate(date, num) {
				date.setDate(date.getDate() + num)
				return date.toISOString().slice(0, 10) + ' 00:00:00'
			},
			/**
			 * 格式化日期
			 * @param date
			 * @returns {string}
			 */
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以需要+1，并使用padStart补零
				return year + '-' + month
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}

	.pleaseSelect {
		color: #c0c4cc;
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>